import React from 'react'
// import SvgIcon from '@/components/SvgIcon/index.tsx'
// import styles from './index.module.scss'
import { Tabs, Button, Checkbox, Form, Input, Divider, Space } from 'antd'
import type { FormProps } from 'antd'

import type { TabsProps } from 'antd'

const onChange = (key: string) => {
  console.log(key)
}

const App: React.FC = () => (
  <div
    className={`w-[100vw] h-[100vh] flex justify-end items-center pr-[150px]  bg-[url('@/assets/images/login/login-bg.png')] bg-no-repeat bg-center bg-cover`}
  >
    <div className='login-form w-[500px] h-[650px] bg-white shadow-xl flex flex-col  items-center p-10  relative'>
      {/* 标题 */}
      <div className='login-form-title font-bold text-2xl w-full'>欢迎使用社团活动平台</div>

      {/* 登录表单 */}
      <Tabs defaultActiveKey='1' items={items} onChange={onChange} size='large' className={`mt-4 w-full`} />

      <Divider plain>其他登录方式</Divider>
      <div className='text-xs text-color-3'>开发中...</div>

      {/* 底部条款 */}
      <div className='absolute bottom-10 text-light-900 text-sm'>
        <span>登录即表示您已阅读并同意</span>
        <span className='underline underline-offset-4 '>服务条款</span>
      </div>
    </div>
  </div>
)

type FieldType = {
  username?: string
  password?: string
  remember?: string
}

const onFinish: FormProps<FieldType>['onFinish'] = (values) => {
  console.log('Success:', values)
}

const onFinishFailed: FormProps<FieldType>['onFinishFailed'] = (errorInfo) => {
  console.log('Failed:', errorInfo)
}

// 账号密码登录--表单
const PasswordForm: React.FC = () => (
  <Form name='basic' initialValues={{ remember: true }} onFinish={onFinish} onFinishFailed={onFinishFailed} autoComplete='off'>
    <Form.Item<FieldType> name='username' rules={[{ required: true, message: '请输入账号或者邮箱' }]}>
      <Input placeholder='请输入账号或者邮箱' size='large' />
    </Form.Item>

    <Form.Item<FieldType> name='password' rules={[{ required: true, message: '请输入密码' }]}>
      <Input.Password placeholder='请输入密码' size='large' />
    </Form.Item>

    <Form.Item<FieldType> name='remember' valuePropName='checked'>
      <Checkbox>记住密码</Checkbox>
    </Form.Item>

    <Form.Item>
      <Button type='primary' htmlType='submit' className='w-full' size='large'>
        登录
      </Button>
    </Form.Item>
  </Form>
)

// 手机号登录--表单
const PhoneForm: React.FC = () => {
  return (
    <Form name='basic' initialValues={{ remember: true }} onFinish={onFinish} onFinishFailed={onFinishFailed} autoComplete='off'>
      <Form.Item<FieldType> name='username' rules={[{ required: true, message: '请输入手机号' }]}>
        <Input placeholder='请输入手机号' size='large' />
      </Form.Item>

      <Form.Item<FieldType> name='password' rules={[{ required: true, message: '请输入验证码' }]}>
        <Space direction='horizontal' className='w-full flex justify-between'>
          <Input placeholder='请输入验证码' size='large' style={{ width: '140%' }} />
          <Button size='large'>获取验证码</Button>
        </Space>
      </Form.Item>

      <Form.Item<FieldType> name='remember' valuePropName='checked'>
        <Checkbox>记住密码</Checkbox>
      </Form.Item>

      <Form.Item>
        <Button type='primary' htmlType='submit' className='w-full' size='large'>
          登录
        </Button>
      </Form.Item>
    </Form>
  )
}

const items: TabsProps['items'] = [
  {
    key: '1',
    label: '账号登录',
    children: <PasswordForm />, // 实例化组件
  },
  {
    key: '2',
    label: '短信登录',
    children: <PhoneForm />,
  },
]

export default App
